	<template>
	<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="80px" label-position="top">
		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="类型" prop="type">
					<el-radio-group v-model="form.type">
						<el-radio v-model="form.type" label='1'>视频</el-radio>
						<el-radio v-model="form.type" label='2'>文字</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-col>
		</el-row>

		<el-row :gutter="20">
			<el-col :span="12">
				<el-form-item label="封面" prop="img">
					<sc-upload v-model="form.img" :apiObj="uploadApi" :on-success="success" :width="220">

						<div class="custom-empty">
							<i class="el-icon-upload"></i>
							<p>上传海报</p>
						</div>
					</sc-upload>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="排序" prop="sort">
					<el-input v-model="form.sort" clearable></el-input>
				</el-form-item>
			</el-col>
			<el-col :span="24">
				<el-form-item label="链接地址" prop="url">
					<el-input type="textarea" v-model="form.url"></el-input>
				</el-form-item>
			</el-col>

		</el-row>
	</el-form>
</template>

<script>
export default {
	props: {
		mode: { type: String, default: "add" }
	},
	data() {
		return {
			//表单数据
			form: {
				id:"",
				title: "",
				type: '1',
				url:'',
				img:'',
				sort:0
			},
			uploadApi:this.$API.upload.img,


			//验证规则
			rules: {
				title:[
					{required: true, message: '请输入标题'}
				],
				img:[
					{required: true, message: '请上传封面'}
				],sort:[
					{required: true, message: '请输入排序数字'}
				],
				url: [
					{required: true, message: '请输入链接地址'}
				]
			},

		}
	},
	mounted() {
		// if(this.mode != 'add'){
		// 	this.rules.password = []
		// 	this.rules.password2 = []
		// }
		// this.getGroup()
	},
	methods: {

		//表单提交方法
		submit(callback){
			this.$refs.dialogForm.validate((valid) => {
				if (valid) {
					callback(this.form)
					console.log(this.form)
				}else{
					return false;
				}
			})
		},
		success(response){
           this.form.img = response.data
			return false;
		},
		// 表单注入数据
		setData(data){

			this.form.id = data.id
			this.form.title = data.title
			this.form.img = data.img
			this.form.url = data.url
			this.form.sort = data.sort
			this.form.type = data.type.toString()
			console.log(this.form)
			// //可以和上面一样单个注入，也可以像下面一样直接合并进去
			// Object.assign(this.form, data)
		}
	}
}
</script>
<style scoped>
.el-card+.el-card {margin-top: 15px;}

.imglist {margin-bottom:0;}
.imglist .el-col+.el-col {margin-left: 10px;}
.custom-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.custom-empty i {font-size: 40px;color: #8c939d;}
.custom-empty p {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}
</style>
